<template>
    <view class="viewport">
        <!-- 顶部背景 -->
        <view class="navbar" :style="{ paddingTop: safeArea.top + 'px' }">
            <view class="back icon-left"></view>
            <view class="title">个人信息</view>
        </view>
        <scroll-view scroll-y v-if="profile">
            <!-- 头像 -->
            <view class="avatar" @click="onUploadFile">
                <image mode="aspectFill" :src="profile.avatar" />
                <text>点击修改头像</text>
            </view>
            <view class="form">
                <view class="form-item">
                    <text class="label">账号</text>
                    <!-- 账号名不能修改，用 text 组件展示 -->
                    <text>{{ profile.account }}</text>
                </view>
                <view class="form-item">
                    <text class="label">昵称</text>
                    <!-- 输入框通过 v-model 双向绑定修改数据 -->
                    <input v-model="profile.nickname" />
                </view>
                <view class="form-item">
                    <text class="label">性别</text>
                    <radio-group @change="(e) => (profile.gender = e.detail.value)">
                        <label class="radio">
                            <radio value="男" color="#27ba9b" :checked="profile.gender === '男'" />
                            男
                        </label>
                        <label class="radio">
                            <radio value="女" color="#27ba9b" :checked="profile.gender === '女'" />
                            女
                        </label>
                    </radio-group>
                </view>
                <view class="form-item">
                    <text class="label">出生日期</text>
                    <picker mode="date" start="1900-01-01" :end="end" :value="profile.birthday"
                        @change="e => (profile.birthday = e.detail.value)">
                        <view>{{ profile.birthday || "请选择日期" }}</view>
                    </picker>
                </view>
                <view class="form-item">
                    <text class="label">城市</text>
                    <picker mode="region" @change="onLocationChange">
                        <view>{{ profile.fullLocation || "请选择城市" }}</view>
                    </picker>
                </view>
                <view class="form-item">
                    <text class="label">职业</text>
                    <!-- 输入框通过 v-model 双向绑定修改数据 -->
                    <input placeholder="请填写职业" v-model="profile.profession" />
                </view>
                <!-- 提交按钮 -->
                <view class="button" @click="onUpdateProfile">保 存</view>
            </view>
        </scroll-view>
    </view>
</template>
<script setup>
import { useSystermStore } from '@/store'
import { useUserStore } from "@/store";
import { getProfileAPI, uploadPhotoAPI, updateProfileAPI } from "@/api/profile";
import { ref } from 'vue'
// 引入dayjs
import dayjs from "dayjs";

const safeArea = useSystermStore().safeArea
const userStore = useUserStore();

//#region 请求数据数据回填
const profile = ref(null)
const loadData = async () => {
    const { result } = await getProfileAPI();
    //   console.log("res  ----->  ", res);
    profile.value = result
}
loadData()
//#endregion

//#region 修改个人信息-打开上传窗口
const onUploadFile = async () => {
    const { tempFiles } = await uni.chooseMedia({
        // 限制数量为：1
        count: 1,
        // 限制上传的文件类型
        mediaType: ["image"],
    });
    // console.log("tempFiles  ----->  ", tempFiles);
    const { data } = await uploadPhotoAPI(tempFiles[0].tempFilePath)
    profile.value.avatar = JSON.parse(data).result.avatar
    //给pinia直接改   vuex不行,但是pinia可以  
    userStore.profile.avatar = profile.value.avatar
    console.log(JSON.parse(data));
}
//#endregion

//#region  编辑生日、城市
const end = ref("")
end.value = dayjs().format("YYYY-MM-DD");

// 城市的改变
const onLocationChange = (e) => {
    console.log(e);
    // 给 完整城市信息赋值
    profile.value.fullLocation = e.detail.value.join(' ');

    // 添加省份编码
    profile.value.provinceCode = e.detail.code[0]
    profile.value.cityCode = e.detail.code[1]
    profile.value.countyCode = e.detail.code[2]

}
//#endregion

//#region  保存修改
const onUpdateProfile = async () => {
    //封装提交事件、调用API
    await updateProfileAPI(profile.value);
    // 点击保存了之后 更多昵称 
    userStore.profile.nickname = profile.value.nickname
    //提示用户，回退路由
    uni.showToast({
        title: "更新成功",
        icon: "success",
        duration: 1500,
    });
    setTimeout(() => {
        uni.navigateBack();
    }, 1000);
}
//#endregion



</script>
<style lang="scss">
page {
    height: 100%;
    overflow: hidden;
    background-color: #f4f4f4;
}

.viewport {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-image: url(https://static.botue.com/erabbit/static/images/order_bg.png);
    background-size: auto 392rpx;
    background-repeat: no-repeat;
}

.navbar {
    .title {
        height: 40px;
        line-height: 32px;
        text-align: center;
        font-size: 17px;
        font-weight: 500;
        color: #fff;
    }

    .back {
        position: absolute;
        left: 20rpx;
        top: 22px;
        font-size: 23px;
        z-index: 9;
        color: #fff;
    }
}

.avatar {
    text-align: center;
    padding: 20rpx 0 40rpx;

    image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
    }

    text {
        display: block;
        padding-top: 20rpx;
        line-height: 1;
        font-size: 26rpx;
        color: #fff;
    }
}

.form {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;

    .form-item {
        display: flex;
        height: 96rpx;
        line-height: 46rpx;
        padding: 25rpx 10rpx;
        background-color: #fff;
        font-size: 28rpx;
        border-bottom: 1rpx solid #ddd;

        &:last-child {
            border: none;
        }

        .label {
            width: 180rpx;
            color: #333;
        }

        input {
            flex: 1;
            display: block;
            height: 46rpx;
        }

        .radio {
            display: inline-block;
            height: 46rpx;
            margin-right: 20rpx;
            vertical-align: middle;
        }

        radio {
            transform: scale(0.7) translateY(-2px);
        }

        picker {
            flex: 1;
        }
    }
}

.button {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    background-color: #27ba9b;
}
</style>